<template>
	<view class="home">
		<view class="card">
			<view class="load" v-if="!load">
				<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
			</view>
			<block v-else>
				<view class="navBox">
					<topStatus></topStatus>
					<view class="tabsBack">
						Love Moment
						<!-- <image class="logoimg"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240223144208.png"></image> -->
					</view>
					<!-- <view class="searchCell" @click="nav_to('/pages/store/searchShop')">
						<image src=" https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240800513109.png"
							class="searchimg">
						</image>
						<view class="scInp">
							<input disabled type="text" v-model="searchContent" placeholder="| 点击搜索商品"
								placeholder-class="placname" />
						</view>
						<view class="scBtnBox">
							<view class="scSumBtn">搜索</view>
						</view>
					</view> -->
					
					<!-- <view class="navlistbox">
						<view class="navcont" v-for="(item, index) in navlist" :key="index" @click="goPages(item)">
							<image class="navimg" :src="item.Icon"></image>
							<view class="navtitle">{{ item.Name }}</view>
						</view>
					</view> -->
				</view>
				<!-- <view class="couponbox">
					<view class="coupon_list">
						<block v-for="(item,i) in couponList" :key="item.ID">
							<view class="coupon_item" :style="{backgroundImage:'url('+item.Banner+')'}">
							<view class="couponTop">
								<view class="topTitle">
									<view class="couTitle">{{ item.Title }}</view>
									<view class="couponPrice couRight">
										<text class="priceText">¥</text>
										<text class="priceNum">{{ item.Discount }}</text>
									</view>
								</view>
								<view class="topContent">
									<view class="couponTime">有效期:{{$util.formatDateTimeYMD(item.EndTime) }}</view>
									<view class="couponUse">{{ item.Amount == 0 ? '无门槛' : `满${item.Amount}可用` }}
									</view>
								</view>
							</view>
							<view class="couponBottom">
								<view class="coupon_btn" v-if="item.IsMyTake != 1" @click="takeCoupon(item,i)">点击领取</view>
								<view class="coupon_btn coupon_no_btn" v-else>已领取</view>
							</view>
						</view>
						</block>
						
					</view>
				</view> -->
				
				<swiper v-if="bannerList.length" class="barimg" :indicator-dots="true" :autoplay="true"
					:interval="3000" :duration="1000" indicator-active-color="#FEF0BC" :style="{height:'calc(100vh - ' + (fixboxHeight-20) +'px)'}">
					<swiper-item v-for="(item, index) in bannerList" :key="index" @click="gotobanner(item)">
						<image :src="item.Banner" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				
				
				
				<!-- <view :style="'height:'+fixboxHeight+'px'"></view> -->
				<view class="shopbox" v-if="shopList.length">
					<view class="shoptitlebox">
						<view class="shop_title">推荐商品</view>
						<!-- <image class="title_icon"
							src=" https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732242944800550.png"></image> -->
					</view>
				
					<view class="shoplistbox">
						<view class="shopCss2Box" v-for="(item, index) in shopList" :key="index" @click="goDetail(item.ID)">
							<image :src="item.Banner" mode="widthFix" />
						</view>
					</view>
				</view>
				
				<BtmLogo></BtmLogo>
				<!-- <view style="height: 20rpx;background-color: #111;"></view> -->
			</block>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex'
export default {
	components: {},
	data() {
		return {
			user: {}, //个人信息
			userinfo: {}, // 完整的个人信息
			load: false, //是否加载
			navlist: [ //导航列表
				// {
				// 	title: '当季特产',
				// 	icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732241301774861.png'
				// },
				// {
				// 	title: '非遗特产',
				// 	icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17322413149855.png'
				// },
				// {
				// 	title: '商务礼意',
				// 	icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17322413316501433.png'
				// },
				// {
				// 	title: '地方特色',
				// 	icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732241342941521.png'
				// },
				// {
				// 	title: '年夜饭',
				// 	icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17322413540231112.png'
				// },
			],
			navIndex: 0, //当前选中的导航
			bannerList: [ ],
			PageIndex: 1, //页码
			PageSize: 30,
			shopList: [], //商品列表
			isMore: true, //是否还有更多
			isNav: false,
			searchContent: "",//搜索的内容,
			fixboxHeight: 510,
			ProductList: [],
			flagProductList:[],
			HWProductList:[],
			couponList:[],
			
			flagList:[]
		};
	},
	computed: {
		...mapState(['Refresh']),
	},
	watch: {},
	async onShow() {
		this.user = uni.getStorageSync("user");
		this.getCouponList()
		this.getMyCartNum()
	},
	async onLoad(e) {
		if (e.pid) {
			uni.setStorageSync("pid", e.pid);
		}
		this.Module()
		// this.SeasonProducts()
		// this.PGIProducts()
		// this.HWProducts()
		await this.getList()
		this.getBanner()
		this.getFlagBanner()
		this.getHeight()
	},
	onReachBottom() {
		if (this.isMore) {
			this.PageIndex++;
			this.getList();
		}
	},
	onUnload() {

	},
	onPageScroll(e) {
		// console.log(e.scrollTop);
		this.isNav = e.scrollTop > 325 ? true : false
	},
	methods: {
		goPages(item){
			if(!item.URL){
				this.$u.toast('未找到路径') 
				return 
			}else{
				this.nav_to(item.URL)
			}
			// if(item.name=='有机农场'){
			// 	this.nav_to(item.URL)
			// }else{
			// 	this.nav_to('/pages/shop/shop_sort?id=' + item.ID)
			// }
		},
		getPayCount(item) {
		    return item > 1000 ? (item / 1000).toFixed(1) + 'k' : item > 1000000 ? (item / 1000000).toFixed(1) + 'M' : item > 100000000 ? (item / 100000000).toFixed(1) : item
		},
		async getCouponList() {
			const that = this
			const res = await that.$api.post('/Coupon/ShopCoupons',{ShopID:0});
			const { code, data } = res
			
			if (code == 0) {
				that.couponList = data
			}
		},
		async takeCoupon(e,i) {
			const that = this
			const res = await that.$api.post('/Coupon/TakeCoupon',{ID:e.ID});
			const { code, data ,message} = res
			if (code == 0) {
				that.$pv.msg('领取成功')
				that.couponList[i].IsMyTake = 1
			}else{
				that.$pv.msg(message)
			}
		},
		async SeasonProducts() {
			let res = await this.$api.post('Products/SeasonProducts', {
				PageIndex: 1,
				PageSize: 50,
				ProductName: ''
			})
			if (res.code == 0) {
				this.ProductList = res.data
			}
		},
		async PGIProducts(){
			let res = await this.$api.post('Products/PGIProducts', {
				PageIndex: 1,
				PageSize: 50,
				ProductName: ''
			})
			if (res.code == 0) {
				this.flagProductList = res.data
			}
		},
		async HWProducts(){
			let res = await this.$api.post('Products/HWProducts', {
				PageIndex: 1,
				PageSize: 50,
				ProductName: ''
			})
			if (res.code == 0) {
				this.HWProductList = res.data
			}
		},
		async Module() {
			let res = await this.$api.post('Module/List', {
				Type: 1,
				// CompanyID : 7006
			})
			if (res.code == 0) {
				this.navlist = res.data
			}
		},
		//搜索
		subSearch() {
			this.getList()
		},
		subblur() {
			this.PageIndex = 1
			this.getList()
		},
		// 选择nav
		chooseNav(index) {
			this.navIndex = index
			this.PageIndex = 1
			this.shopList = []
			this.getList()
		},
		// 获取轮播图
		async getBanner() {
			let res = await this.$api.post("/Banner/GetBanner", {
				PageKey: "homeTop",
			});
			if (res.code == 0) {
				if (res.data) {
					this.bannerList = res.data;
				}
			}
		},
		async getFlagBanner() {
			let res = await this.$api.post("/Banner/GetBanner", {
				PageKey: "flag",
			});
			if (res.code == 0) {
				if (res.data) {
					this.flagList = res.data;
				}
			}
		},
		// 点击轮播图
		gotobanner(item) {
			if (item.Title == '吃货中国') {
				uni.switchTab({
					url: '/pages/foodieChina/chinaMap'
				})
				return
			}
			if (item.GoUrl) {
				this.nav_to(item.GoUrl)
			}
		},
		gotoFlag(item){
			if (item.GoUrl) {
				this.nav_to(item.GoUrl)
			}else{
				this.$pv.msg('未找到该路径')
			}
			// this.nav_to('/pages/shop/IconicProduct')
		},
		// 点击跳转详情
		goDetail(id) {
			this.nav_to(`/pages/shop/detail?id=${id}`)
		},
		// 获取商品列表
		async getList() {
			let res = await this.$api.post('/Products/Recommend', {
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
				ProductName: this.searchContent,
			});
			if (res.code == 0) {
				this.shopList = this.PageIndex == 1 ? this.shopList = res.data : this.shopList.concat(res.data)

				this.load = true;
			}
			
    

			this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
		},
		async getUserInfo() {
			let u = uni.getStorageSync('user');
			let res = await this.$api.post('User/GetUserInfo', {
				ID: u.UserID
			});
			if (res.code == 0) {
				this.userinfo = res.data
				uni.setStorageSync('user', this.userinfo);
			}

		},
		// 根据,切割返回tags数组
		getTags(str) {
			return str.split(',') || []
		},
		getHeight() {
			let that = this;
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(that);
				query.select('.navBox').boundingClientRect(data => {
					if (data) {
						// data.height 就是元素的高度
						that.fixboxHeight = data.height + 20;
					}
				}).exec();
			}, 500);

		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #111;
}

view {
	box-sizing: border-box;
}

.navBox {
	position: sticky;
	width: 100%;
	box-sizing: border-box;
	top: 0;
	left: 0;
	z-index: 999;
	// width: 750rpx;
	// height: 712rpx;
	// margin-bottom: 20rpx;
	
	background-color: #111;
	// padding-bottom: 14rpx;
	.tabsBack {
		height: 44px;
		display: flex;
		align-items: center;

		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		// padding-left: 16rpx;
		.logoimg {
			width: 192rpx;
			height: 48rpx;
			margin-left: 24rpx;
		}
	}

	.searchCell {
		width: 702rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 36rpx;
		margin: 0 auto;
	
		.scIcon {
			margin-right: 16rpx;
		}

		.searchimg {
			width: 32rpx;
			height: 32rpx;
			margin-left: 32rpx;
		}

		.scInp {
			flex: 1;
			margin-left: 5rpx;

			>input {
				width: 100%;
				background: transparent;
				margin-left: 16rpx;
			}

			.placname {
				color: #999999;
				font-size: 28rpx;
				// margin-left: 16rpx;
			}
		}

		.scBtnBox {
			display: flex;
			// margin-left: auto;
			margin-right: 8rpx;

			.scSumBtn {
				padding: 13rpx 34rpx;
				background: #e65a8b;
				border-radius: 32rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				&:last-child {
					margin-left: 20rpx;
				}
			}
		}
	}

	
	.barimg_map{
		width: 702rpx;
		height: 150rpx;
	}
}
.barimg {
		width: 100%;
		height: 1200rpx;
		display: block;
		// margin: 20rpx auto;

		swiper-item {
			width: 100%;
			height: 100%;
			// border-radius: 16rpx;
			overflow: hidden;

			>image {
				width: 100%;
				height: 100%;
			}
		}

	}
.navlistbox {
	display: flex;
	align-items: center;
	// justify-content: space-around;
	flex-wrap: wrap;
	width: 702rpx;
	// height: 202rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 32rpx 28rpx;
	padding-bottom: 0rpx;
	box-sizing: border-box;
	margin: 0 auto;

	.navcont {
		width: calc(100% / 5);
		text-align: center;
		margin-bottom: 16rpx;

		.navimg {
			width: 88rpx;
			height: 88rpx;
		}

		.navtitle {
			font-size: 24rpx;
			color: #666666;
			margin-top: 16rpx;
		}
	}
}

.heatbox {
	width: 702rpx;
	height: 402rpx;
	margin: 20rpx auto;
	// background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17325278470281311.png');
	background-image: linear-gradient(180deg,#a6c8ff6b 0,#a6c8ff6b, 40%, #fff 100%);
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 18rpx;

	.heattextbox {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 26rpx 22rpx;
		box-sizing: border-box;

		.heat_til {
			font-size: 32rpx;
			font-weight: bold;
			margin-right: 8rpx;
		}

		.heat_img {
			width: 38rpx;
			height: 38rpx;
		}

		.heat_more {
			width: fit-content;
			height: 44rpx;
			padding: 0 24rpx;
			background: linear-gradient(90deg, rgba(79,131,255, 0.05) 0%, rgba(79,131,255, 0.21) 100%);
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #5d8bf8;
			margin-left: auto;
		}
	}

	.heat_shop_box {
		overflow-x: auto;
		width: 100%;
		padding: 0 22rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.heat_shop {
			width: 156rpx;
			margin-right: 16rpx;
			position: relative;
			.good_label{
				position: absolute;
				top: 0;
				left: 0;
				padding: 8rpx 12rpx;
				background-color: #FF471A;
				color: #fff;
				font-size: 16rpx;
				border-radius: 16rpx 0 16rpx 0;
			}
			.good_label_green{
				background-color: #1ed68d;
			}
			.heat_spimg {
				width: 156rpx;
				height: 156rpx;
				// background-color: red;
				border-radius: 16rpx;
			}

			.heat_spname {
				width: 156rpx;
				font-size: 24rpx;
				display: -webkit-box;
				/* 设置为WebKit内核的弹性盒子模型 */
				-webkit-box-orient: vertical;
				/* 垂直排列 */
				-webkit-line-clamp: 2;
				/* 限制显示两行 */
				overflow: hidden;
				/* 隐藏超出范围的内容 */
				text-overflow: ellipsis;
				/* 使用省略号 */

			}
			
			.heat_price_box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.heat_payCount{
					font-size: 18rpx;
					color: #999;
				}
			}
			
			.heat_price {
				font-size: 32rpx;
				font-weight: bold;
				color: #fc394b;
			}

			.pr_icon {
				font-size: 20rpx;
				font-weight: bold;
				color: #fc394b;
			}
		}
	}
}
.couponbox{
	width: 702rpx;
	margin: 20rpx auto;
	overflow: auto;
	.coupon_list {
		// width: 100%;
		width: fit-content;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		// background-color: white;
		// padding: 24rpx;
		border-radius: 16rpx;

		.coupon_item {
			width: 500rpx;
			// height: 175rpx;
			padding: 14rpx 24rpx;
			background-color: #fdf3f3;
			border-radius: 24rpx;
			margin-right: 16rpx;
			// border: 2rpx solid #fdf9f6;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.couRight {
				width: 100rpx;
			}

			.couponTop {
				width: 100%;
				padding-bottom: 12rpx;


				.topTitle {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.couTitle {
						color: #282828;
						font-size: 32rpx;
						font-weight: bold;
					}

					.couponPrice {
						display: flex;
						justify-content: flex-end;
						align-items: baseline;

						.priceText {
							color: #fc394b;
							font-weight: bold;
							font-size: 20rpx;
						}

						.priceNum {
							color: #fc394b;
							font-weight: bold;
							font-size: 48rpx;
						}
					}
				}

				.topContent {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.couponTime {
						font-size: 22rpx;
						color: #df5d4d;
					}

					.couponUse {
						text-align: right;
						font-size: 24rpx;
						color: #df5d4d;
					}
				}
			}
			.couponBottom{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.coupon_btn{
					width: 120rpx;
					height: 48rpx;
					border-radius: 26rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #e84c42;
					border: 2rpx solid #e84c42;
					color: white;
					font-size: 22rpx;
				}
				.coupon_no_btn{
					// border: 2rpx solid #999999;
					border: 2rpx solid #654f4f;
					background-color: transparent;
					// color: #999999;
					color: #654f4f;
				}
			}
		}
	}
}

.shopbox {
	width: 100%;
	padding: 0 24rpx;
	box-sizing: border-box;
	// padding-bottom: 100rpx;

	.shoptitlebox {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		// margin-left: 16rpx;

		.shop_title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.title_icon {
			width: 28rpx;
			height: 60rpx;
		}
	}

	.shoplistbox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.shopCss2Box{
			width: 100%;
			>image{
				width: 100%;
				display: block;
			}
		}
		.shopcont {
			width: 342rpx;
			// height: 546rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			padding-bottom: 18rpx;
			position: relative;
			.shop_tag{
				position: absolute;
				top: 0;
				left: 0;
				padding: 8rpx 12rpx;
				background-color: #FF471A;
				color: #fff;
				font-size: 22rpx;
				border-radius: 16rpx 0 16rpx 0;
			}
			.shop_tag_green{
				background-color: #1ed68d;
			}
			.shopimg {
				width: 344rpx;
				height: 344rpx;
				// background-color: red;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}

			.shopname {
				width: 312rpx;
				height: 74rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				margin: 16rpx auto;
				margin-bottom: 0;
				font-size: 28rpx;
				font-weight: bold;
			}
			
			.shop_label_cell{
				display: flex;
				flex-wrap: wrap;
				padding: 0 10rpx;
				.shop_label{
					height: 36rpx;
					border-radius: 8rpx;
					border: 1rpx solid #f91c1c;
					font-weight: 500;
					font-size: 20rpx;
					color: #f91c1c;
					margin: 5rpx;
					padding: 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.shop_con{
					opacity: 0;
					height: 20rpx;
				}
			}
			
			
			.shop_pircebox {
				width: 312rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price_title {
					font-size: 40rpx;
					font-weight: bold;
					color: #fc394b;
				}

				.price_icon {
					font-size: 28rpx;
					font-weight: bold;
					color: #fc394b;
				}

				.soid {
					font-size: 24rpx;
					color: #999999;
				}
			}
			
		}
	}

	.shoplistbox .shopcont:nth-child(2n) {
		margin-right: 0rpx;
	}
}
</style>